<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="opensource rich wysiwyg text editor jquery bootstrap execCommand html5" />
    <meta name="description" content="This tiny jQuery Bootstrap WYSIWYG plugin turns any DIV into a HTML5 rich text editor" />
    <link href="external/google-code-prettify/prettify.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="./jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="./jquery.emoji.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="external/jquery.hotkeys.js"></script>
    <script src="./jquery.mousewheel-3.0.6.min.js"></script>
    <script src="./jquery.mCustomScrollbar.min.js"></script>
    <script src="./jquery.emoji.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
		<link href="index.css" rel="stylesheet">
    <script src="bootstrap-wysiwyg.js"></script>
  </head>
  <body>

<div class="container">
	<!---
	Please read this before copying the toolbar:

	* One of the best things about this widget is that it does not impose any styling on you, and that it allows you 
	* to create a custom toolbar with the options and functions that are good for your particular use. This toolbar
	* is just an example - don't just copy it and force yourself to use the demo styling. Create your own. Read 
	* this page to understand how to customise it:
    * https://github.com/mindmup/bootstrap-wysiwyg/blob/master/README.md#customising-
	-->
	  <div id="alerts"></div>
    <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
      <!-- <div class="btn-group">
        <a class="btn"  data-placement="bottom" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
        <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
      </div> -->
      <div class="btn-group">
        <a class="btn" id="btn-emoji" data-placement="bottom" title="emoji|表情 ">表情</a>
      </div>
      <div class="btn-group">
        <a class="btn" data-edit="undo"  data-placement="bottom" title="Undo|撤销 (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
        <a class="btn" data-edit="redo"  data-placement="bottom" title="Redo|重做 (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
      </div>
      <input type="text" data-edit="inserttext" id="voiceBtn"  class="voiceBtn" x-webkit-speech="">
    </div>
    <div id="editor" class="editor"></div>
  </div>
  <div class="container">
    <div id="qedit"></div>  
  </div>


<script>
  (function($){
    $.extend({
      QEOpt:{
        font:false,
        fontSize:false,
        style:false,
        list:false,
        align:false,
        link:false,
        media:false,
        rdud:false
        
      },
      quickEditOption:function(obj){
        obj=obj||{};
        for (const key in $.QEOpt) {
        if (obj.hasOwnProperty(key)) {
            $.QEOpt[key]=obj[key];          
          }
        }
        return $.QEOpt;
      }
    })
    $.fn.extend({
      quickEdit:function(optObj){
        var optObj=optObj||{};
        var option=$.quickEditOption();
        
        option=$.extend(option,optObj);
        this.each(function(){
          console.log(option)
          var baseID=Date.now();
          var toolStr=``;
          var toolbar={
            font:`
            <div class="btn-group">
              <a class="btn dropdown-toggle" data-toggle="dropdown"  data-placement="bottom" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
              <ul class="dropdown-menu"></ul>
            </div>
            `,
            fontSize:`
            <div class="btn-group">
              <a class="btn dropdown-toggle" data-toggle="dropdown"  data-placement="bottom" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
              </ul>
            </div>
            `,
            style:`
            <div class="btn-group">
              <a class="btn" data-edit="bold"  data-placement="bottom" title="Bold|加粗 (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
              <a class="btn" data-edit="italic"  data-placement="bottom" title="Italic|斜体 (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
              <a class="btn" data-edit="strikethrough"  data-placement="bottom" title="Strikethrough|删除线"><i class="icon-strikethrough"></i></a>
              <a class="btn" data-edit="underline"  data-placement="bottom" title="Underline|下划线 (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
            </div>
            `,
            list:`
            <div class="btn-group">
              <a class="btn" data-edit="insertunorderedlist"  data-placement="bottom" title="Bullet list|无序列表"><i class="icon-list-ul"></i></a>
              <a class="btn" data-edit="insertorderedlist"  data-placement="bottom" title="Number list|有序列表"><i class="icon-list-ol"></i></a>
              <a class="btn" data-edit="outdent"  data-placement="bottom" title="Reduce indent|撤销缩进 (Shift+Tab)"><i class="icon-indent-left"></i></a>
              <a class="btn" data-edit="indent"  data-placement="bottom" title="Indent|缩进 (Tab)"><i class="icon-indent-right"></i></a>
            </div>
            `,
            align:`
            <div class="btn-group">
              <a class="btn" data-edit="justifyleft"  data-placement="bottom" title="Align Left|左对齐 (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
              <a class="btn" data-edit="justifycenter"  data-placement="bottom" title="Center|居中 (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
              <a class="btn" data-edit="justifyright"  data-placement="bottom" title="Align Right|右对齐 (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
              <a class="btn" data-edit="justifyfull"  data-placement="bottom" title="Justify|两端对齐 (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
            </div>
            `,
            link:`
            <div class="btn-group">
              <a class="btn dropdown-toggle" data-toggle="dropdown"  data-placement="bottom" title="Hyperlink|超链接"><i class="icon-link"></i></a>
                <div class="dropdown-menu input-append">
                  <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
                  <button class="btn" type="button">+</button>
                </div>
              <a class="btn" data-edit="unlink"  data-placement="bottom" title="Remove Hyperlink|删除超链接"><i class="icon-cut"></i></a>
            </div>
            `,
            media:`

            <div class="btn-group">
              <a class="btn"  data-placement="bottom" title="Insert picture (or just drag & drop)" id="pictureBtn${baseID}"><i class="icon-picture"></i></a>
              <input type="file" data-role="magic-overlay" data-target="#pictureBtn${baseID}" data-edit="insertImage" />
              <button type="button" class="btn"  data-placement="bottom" title="emoji|表情" id="emojiBtn"><b>:)</B></button>
            </div>
            `,
            rdud:`
            <div class="btn-group">
              <a class="btn" data-edit="undo"  data-placement="bottom" title="Undo|撤销 (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
              <a class="btn" data-edit="redo"  data-placement="bottom" title="Redo|重做 (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
            </div>
            `
          }
          for (const key in toolbar) {
            if(option[key]){
              toolStr+=toolbar[key]
            }
          }
          $(this).html(`
          <div id="${baseID}" class="btn-toolbar" data-role="editor-toolbar" data-target="#editor${baseID}">
            ${toolStr}
            <input type="text" data-edit="inserttext" id="voiceBtn${baseID}" class="voiceBtn" x-webkit-speech="">
          </div>
          <div id="editor${baseID}" class="editor"></div>
          `)
          function initToolbarBootstrapBindings() {
            //字体列表
            var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier','Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times','Times New Roman', 'Verdana'],
            fontTarget = $('[title=Font]').siblings('.dropdown-menu');
            $.each(fonts, function (idx, fontName) {
              fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
            });
            //初始化工具提示
            $('[title]').tooltip({container:'body'});
            
            $('.dropdown-menu input').click(function() {return false;})
              .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
              .keydown('esc', function () {this.value='';$(this).change();});
            $('[data-role=magic-overlay]').each(function () { 
              var overlay = $(this), target = $(overlay.data('target')); 
              overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
            });
            if ("onwebkitspeechchange" in document.createElement("input")) {
              var editorOffset = $(`#editor${baseID}`).offset();
              $(`#voiceBtn${baseID}`).css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$(`#editor${baseID}`).innerWidth()-35});
            } else {
              $(`#voiceBtn${baseID}`).hide();
            }
          };//initToolbarBootstrapBindings END
          function showErrorAlert (reason, detail) {
            var msg='';
            if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
            else {
              console.log("error uploading file", reason, detail);
            }
            $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
            '<strong>File upload error</strong> '+msg+' </div>').prependTo(this);
          };//showErrorAlert END
          initToolbarBootstrapBindings();
          $(`#editor${baseID}`).wysiwyg({fileUploadError: showErrorAlert});
           window.prettyPrint && prettyPrint();
           $(`#editor${baseID}`).emoji({
            button:`#${baseID} #emojiBtn`,
            showTab: true,
            animation: 'none',            
            icons: [
              {
                name: "贴吧表情",
                path: "img/tieba/",
                maxNum: 50,
                file: ".jpg",
                placeholder: ":{alias}:",
                alias: {
                    1: "hehe",
                    2: "haha",
                    3: "tushe",
                    4: "a",
                    5: "ku",
                    6: "lu",
                    7: "kaixin",
                    8: "han",
                    9: "lei",
                    10: "heixian",
                    11: "bishi",
                    12: "bugaoxing",
                    13: "zhenbang",
                    14: "qian",
                    15: "yiwen",
                    16: "yinxian",
                    17: "tu",
                    18: "yi",
                    19: "weiqu",
                    20: "huaxin",
                    21: "hu",
                    22: "xiaonian",
                    23: "neng",
                    24: "taikaixin",
                    25: "huaji",
                    26: "mianqiang",
                    27: "kuanghan",
                    28: "guai",
                    29: "shuijiao",
                    30: "jinku",
                    31: "shengqi",
                    32: "jinya",
                    33: "pen",
                    34: "aixin",
                    35: "xinsui",
                    36: "meigui",
                    37: "liwu",
                    38: "caihong",
                    39: "xxyl",
                    40: "taiyang",
                    41: "qianbi",
                    42: "dnegpao",
                    43: "chabei",
                    44: "dangao",
                    45: "yinyue",
                    46: "haha2",
                    47: "shenli",
                    48: "damuzhi",
                    49: "ruo",
                    50: "OK"
                },
                title: {
                    1: "呵呵",
                    2: "哈哈",
                    3: "吐舌",
                    4: "啊",
                    5: "酷",
                    6: "怒",
                    7: "开心",
                    8: "汗",
                    9: "泪",
                    10: "黑线",
                    11: "鄙视",
                    12: "不高兴",
                    13: "真棒",
                    14: "钱",
                    15: "疑问",
                    16: "阴脸",
                    17: "吐",
                    18: "咦",
                    19: "委屈",
                    20: "花心",
                    21: "呼~",
                    22: "笑脸",
                    23: "冷",
                    24: "太开心",
                    25: "滑稽",
                    26: "勉强",
                    27: "狂汗",
                    28: "乖",
                    29: "睡觉",
                    30: "惊哭",
                    31: "生气",
                    32: "惊讶",
                    33: "喷",
                    34: "爱心",
                    35: "心碎",
                    36: "玫瑰",
                    37: "礼物",
                    38: "彩虹",
                    39: "星星月亮",
                    40: "太阳",
                    41: "钱币",
                    42: "灯泡",
                    43: "茶杯",
                    44: "蛋糕",
                    45: "音乐",
                    46: "haha",
                    47: "胜利",
                    48: "大拇指",
                    49: "弱",
                    50: "OK"
                }
              }, 
              {
                path: "img/qq/",
                name:'QQ表情',
                maxNum: 91,
                excludeNums: [41, 45, 54],
                file: ".gif",
                placeholder: "#qq_{alias}#"
              }
            ]
          });
        })//each END
      }//quickEdit END

    })
  })(jQuery)
  $(function(){
  function initToolbarBootstrapBindings() {
    //字体列表
    var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier','Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times','Times New Roman', 'Verdana'],
    fontTarget = $('[title=Font]').siblings('.dropdown-menu');
    $.each(fonts, function (idx, fontName) {
        fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
    });
    //初始化工具提示
    $('a[title]').tooltip({container:'body'});
    
    $('.dropdown-menu input').click(function() {return false;})
      .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
      .keydown('esc', function () {this.value='';$(this).change();});

    $('[data-role=magic-overlay]').each(function () { 
      var overlay = $(this), target = $(overlay.data('target')); 
      overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
    });
    if ("onwebkitspeechchange" in document.createElement("input")) {
      var editorOffset = $('#editor').offset();
      $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
    } else {
      $('#voiceBtn').hide();
    }
	};
	function showErrorAlert (reason, detail) {
		var msg='';
		if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
		else {
			console.log("error uploading file", reason, detail);
		}
		$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
		 '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
	};
  initToolbarBootstrapBindings();  
  $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
  $("#editor").emoji({
    button:'#btn-emoji',
    showTab: true,
    animation: 'fade',
    icons: [
      {
        name: "贴吧表情",
        path: "img/tieba/",
        maxNum: 50,
        file: ".jpg",
        placeholder: ":{alias}:",
        alias: {
            1: "hehe",
            2: "haha",
            3: "tushe",
            4: "a",
            5: "ku",
            6: "lu",
            7: "kaixin",
            8: "han",
            9: "lei",
            10: "heixian",
            11: "bishi",
            12: "bugaoxing",
            13: "zhenbang",
            14: "qian",
            15: "yiwen",
            16: "yinxian",
            17: "tu",
            18: "yi",
            19: "weiqu",
            20: "huaxin",
            21: "hu",
            22: "xiaonian",
            23: "neng",
            24: "taikaixin",
            25: "huaji",
            26: "mianqiang",
            27: "kuanghan",
            28: "guai",
            29: "shuijiao",
            30: "jinku",
            31: "shengqi",
            32: "jinya",
            33: "pen",
            34: "aixin",
            35: "xinsui",
            36: "meigui",
            37: "liwu",
            38: "caihong",
            39: "xxyl",
            40: "taiyang",
            41: "qianbi",
            42: "dnegpao",
            43: "chabei",
            44: "dangao",
            45: "yinyue",
            46: "haha2",
            47: "shenli",
            48: "damuzhi",
            49: "ruo",
            50: "OK"
        },
        title: {
            1: "呵呵",
            2: "哈哈",
            3: "吐舌",
            4: "啊",
            5: "酷",
            6: "怒",
            7: "开心",
            8: "汗",
            9: "泪",
            10: "黑线",
            11: "鄙视",
            12: "不高兴",
            13: "真棒",
            14: "钱",
            15: "疑问",
            16: "阴脸",
            17: "吐",
            18: "咦",
            19: "委屈",
            20: "花心",
            21: "呼~",
            22: "笑脸",
            23: "冷",
            24: "太开心",
            25: "滑稽",
            26: "勉强",
            27: "狂汗",
            28: "乖",
            29: "睡觉",
            30: "惊哭",
            31: "生气",
            32: "惊讶",
            33: "喷",
            34: "爱心",
            35: "心碎",
            36: "玫瑰",
            37: "礼物",
            38: "彩虹",
            39: "星星月亮",
            40: "太阳",
            41: "钱币",
            42: "灯泡",
            43: "茶杯",
            44: "蛋糕",
            45: "音乐",
            46: "haha",
            47: "胜利",
            48: "大拇指",
            49: "弱",
            50: "OK"
        }
      }, 
      {
        path: "img/qq/",
        name:'QQ表情',
        maxNum: 91,
        excludeNums: [41, 45, 54],
        file: ".gif",
        placeholder: "#qq_{alias}#"
      }
    ]
  });
    window.prettyPrint && prettyPrint();
});
</script>
<script>
  $.quickEditOption({
    font:true,
    fontSize:true,
    style:true,
    list:true,
    align:true,
    link:true,
    media:true,
    rdud:true
  })
  $('#qedit').quickEdit();
</script>
</html>
